<template>
	<div class="sl_title__container">
    <h2 class="base-padding">{{ title }}</h2>
    <div class="container" :style="handleContainerSly">
      <slot name="titleCont"></slot>
    </div>
  </div>
</template>
<script>
 export default {
   name: 'sl-title',
   props: {
     title: ''
   },
   computed: {
     handleContainerSly () {
       if (this.$slots.titleCont) {
         return {
           padding: 1 * 0.61 + 'rem'
         }
       }
       return {}
     }
   }
 }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .sl_title__container
    h2
      padding-top 1.5 * .61rem
      padding-bottom 1.5 * .61rem
      background $sl_theme_bg
    .container
      background #fff
      line-height $sl_font_size_16
      color $sl_font_color_default
      p
        display: block
        font-size $sl_font_size_small
</style>
